<!-- src/components/ConversationList.vue -->
<template>
  <div class="conversation-list">
    <div class="list-header">
      <el-button 
        type="primary" 
        class="new-chat-btn" 
        @click="handleNewChat"
      >
        <el-icon><Plus /></el-icon>
        新会话
      </el-button>
    </div>
    
    <div class="conversations">
      <template v-for="group in groupedConversations" :key="group.title">
        <div class="time-group">
          <div class="group-title">{{ group.title }}</div>
          <div
            v-for="conversation in group.conversations"
            :key="conversation.id"
            class="conversation-item"
            :class="{ active: conversation.id === chatStore.currentConversationId }"
            @click="selectConversation(conversation.id)"
          >
            <div class="conversation-title">
              <el-icon><ChatRound /></el-icon>
              <span>{{ conversation.title }}</span>
            </div>
            <el-button
              class="delete-btn"
              type="text"
              @click.stop="handleDelete(conversation.id)"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus, ChatRound, Delete } from '@element-plus/icons-vue'
import { useChatStore } from '../store/chat'
import { ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import type { Conversation } from '../store/chat'
import { computed } from 'vue'

dayjs.locale('zh-cn')

const chatStore = useChatStore()

const groupedConversations = computed(() => {
  const now = dayjs()
  const groups: { title: string; conversations: Conversation[] }[] = []
  const today: Conversation[] = []
  const yesterday: Conversation[] = []
  const last30Days: Conversation[] = []
  const older: { [key: string]: Conversation[] } = {}

  chatStore.conversations.forEach((conversation: Conversation) => {
    const date = dayjs(conversation.createdAt)
    const diffDays = now.diff(date, 'day')

    if (diffDays === 0) {
      today.push(conversation)
    } else if (diffDays === 1) {
      yesterday.push(conversation)
    } else if (diffDays <= 30) {
      last30Days.push(conversation)
    } else {
      const monthKey = date.format('YYYY-MM')
      if (!older[monthKey]) {
        older[monthKey] = []
      }
      older[monthKey].push(conversation)
    }
  })

  if (today.length > 0) {
    groups.push({ title: '今天', conversations: today })
  }
  if (yesterday.length > 0) {
    groups.push({ title: '昨天', conversations: yesterday })
  }
  if (last30Days.length > 0) {
    groups.push({ title: '30天内', conversations: last30Days })
  }

  // 添加更早的月份，按时间倒序排列
  Object.keys(older)
    .sort((a, b) => b.localeCompare(a))
    .forEach(monthKey => {
      groups.push({
        title: monthKey,
        conversations: older[monthKey]
      })
    })

  return groups
})

const handleNewChat = () => {
  chatStore.createNewConversation()
}

const selectConversation = (id: string) => {
  chatStore.currentConversationId = id
}

const handleDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个会话吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    chatStore.deleteConversation(id)
  } catch {
    // 用户取消删除
  }
}
</script>

<style scoped lang="scss">
.conversation-list {
  width: 260px;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;

  .list-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;

    .new-chat-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
  }

  .conversations {
    flex: 1;
    overflow-y: auto;
    padding: 8px;

    .time-group {
      margin-bottom: 16px;

      .group-title {
        padding: 8px 12px;
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
      }
    }

    .conversation-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      margin-bottom: 4px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: var(--hover-color);
        .delete-btn {
          opacity: 1;
        }
      }

      &.active {
        background: var(--accent-color);
        color: white;

        .delete-btn {
          color: white;
        }
      }

      .conversation-title {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        overflow: hidden;

        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .delete-btn {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
    }
  }
}
</style>